<template>
  <div id="assetAnalysis">
    <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    />
    <div class="container">
      <!-- <div class="total">
        <div class="text">
          <span>合计:</span>
          <span>上架数量: 1000</span>
          <span>可周转数量:4000</span>
          <span>成交额:10000</span>
        </div>
      </div> -->
      <DataTable
        rowKey="adminId"
        :btns="btns"
        :tableData="Data"
        :showConfig = false
        :tableColumn="tableColumn"
        :pageConfig="pageConfig"
        @refresh="getList"
        @handleEvent="handleJump"
      />
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue } from 'vue-property-decorator';
import { BILLRECORD_BILLRECORDSUMMARYEXPORT } from '@/api/global'
@Component
export default class assetAnalysis extends Vue {
  projectList:any[] = []
  taskDetailList:any[] = []
  projectId:any = ''
  taskDetailId:any = ''
  searchForm: any = {
    taskDetailId: ''
  };
  btns: any[] = [
    {
      label: '导出',
      icon: 'export',
      callback: () => this.$util.exportExcelFun(this.idObj, BILLRECORD_BILLRECORDSUMMARYEXPORT)
    }
  ];
  get filterData () {
    return {
      projectId: {
          label: '项目',
          type: 'select',
          width: 200,
          template: {
            placeholder: '请选择项目',
            clearable: false,
            filterable: true,
            options: this.projectList,
            callback: this.handleSelectProject,
            search: this.searchProject
          }
        },
        taskDetailId: {
          label: '盘点周期',
          type: 'select',
          width: 200,
          template: {
            placeholder: '请选择盘点周期',
            clearable: false,
            filterable: true,
            options: this.taskDetailList,
            callback: this.handleSelectTaskDetail
          }
        }
    };
  }
  shearchVal:any = ''
  Data: any[] = [];
  tableColumn: any = {
    ind: {
      label: '序号',
      width: 120
    },
    typeCode: {
      label: '统计分类编码',
      width: 120
    },
    typeName: {
      label: '统计分类名称',
      width: 120
    },
    unit: {
      label: '计量单位',
      width: 100
    },
    buyNum: {
      label: '购入量',
      width: 100
    },
    buyUnitPrice: {
      label: '购入单价',
      width: 100
    },
    incomeNum: {
      label: '调入量',
      width: 100
    },
    incomeUnitPrice: {
      label: '调入单价',
      // type: 'event',
      width: 100
    },
    outcomeNum: {
      label: '调出量',
      width: 100
    },
    outcomeUnitPrice: {
      label: '调出单价',
      width: 100
    },
    totalNum: {
      label: '期初总数',
      width: 100
    },
    countingNum: {
      label: '盘点剩余',
      width: 100
    },
    costNum: {
      label: '消耗',
      width: 100
    }
  };
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };
  idObj:any = {
    taskDetailId: ''
  }
// get getSearchForm () {
//     return {
//       word: this.searchForm.word
//     }
//   }
  get getSearchForm () {
    return {
      taskDetailId: 'ID844226444786663424'
    };
  }

  init () {
    this.getProjectList()
  }
  // 选择周期
  handleSelectTaskDetail (val:any) {
    this.idObj.taskDetailId = val
    // this.getList(val)
  }

  // let data = {
  //     ...this.getSearchForm,
  //     page: this.pageConfig.current,
  //     size: this.pageConfig.pageSize
  //   }
  //   this.$api.projectNcProjectListFetch(data).then((res: any) => {


  // 获取项目列表
  getProjectList () {
    let data = {
      page: 1,
      size: 100,
      searchValue: this.shearchVal
    }
    this.$api.projectRoleProjectListFetch(data).then((res:any) => {
      res.data.records.map((item:any) => {
        item.label = item.ncProjectName
        item.value = item.ncProjectId + '-' + item.ncProjectName
      })
      this.projectList = res.data.records
      this.projectId = res.data.records[0].value
    }).catch()
  }
  // 搜索项目
  searchProject (val:any) {
    this.shearchVal = val
    this.getProjectList()
    this.getTaskList()
  }
  // 选择项目
  handleSelectProject (val:any) {
    this.projectId = val
    this.getTaskList()
    // this.$api.billRecordTaskListFetch({projectId: val ? val.split('-')[0] : ''}).then(res => {
    //   if (res.data.length == 0) {
    //     this.taskDetailList = []
    //     this.searchForm.taskDetailId = ''
    //   } else {
    //     res.data.map((item:any) => {
    //       item.label = item.taskName
    //       item.value = item.taskDetailId
    //     })
    //     this.taskDetailList = res.data
    //   }
    // }).catch()
  }
  //
  getTaskList () {
    this.$api.billRecordTaskListFetch({projectId: this.projectId ? this.projectId.split('-')[0] : ''}).then(res => {
      if (res.data.length == 0) {
        this.taskDetailList = []
        this.searchForm.taskDetailId = ''
      } else {
        res.data.map((item:any) => {
          item.label = item.taskName
          item.value = item.taskDetailId
        })
        this.taskDetailList = res.data
      }
    }).catch()
  }

  getList () {
    let data = {
      page: this.pageConfig.current,
      size: this.pageConfig.pageSize,
      taskDetailId: this.searchForm.taskDetailId
    };
    this.$api.billRecordBillRecordsFetch(data).then((res: any) => {
      res.data.records.map((item:any, index:any) => {
        item.ind = this.pageConfig.pageSize * (this.pageConfig.current - 1) + 1 + index
        // item.ind = (index + 1) * this.pageConfig.current
      })
      this.Data = res.data.records;
      this.pageConfig.total = res.data.total;
      // if (!this.Data.length && this.pageConfig.current > 1) {
      //   --this.pageConfig.current;
      //   this.getList();
      // }
    });
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getList();
  }
  handleJump (row: any) {
    this.$router.push({
      path: '/allot/assetAnalysis/operate',
      query: { _alias: 'detail' }
    });
  }
}
</script>
<style lang='scss' scoped>
.total {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  .text {
    margin-right: 10px;
    font-weight: bold;
    flex: 1;
    display: flex;
    span {
      margin-right: 30px;
    }
  }
}
</style>
